<template>
  <div class="coupon_bot" v-if="coupons.length != 0">
    <template v-for="item in coupons">
      <div v-if="item.overTime >= 0" class="couponList12">
        <span v-if="item.type=='rebate'" class="myCouponType">{{item.type | couponTp}}</span>
        <span v-if="item.type=='voucher'" class="myCouponType blue">{{item.type | couponTp}}</span>
        <span v-if="item.type=='cash'" class="myCouponType yellow">{{item.type | couponTp}}</span>
        <span v-if="item.type=='present'" class="myCouponType orange">{{item.type | couponTp}}</span>
        <span v-if="item.type=='ticket'" class="myCouponType purple">{{item.type | couponTp}}</span>
        <span class="myCouponD">{{item.price | denomination(item.type)}}</span>
        <span class="myCouponN">{{item.name}}</span>
      </div>
    </template>
    <i class="iconfont icon-right jiantou" v-if="showLength == true && flag == true" @click="couponPage"></i>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        coupons: [],
        showLength:''
      }
    },
    props:['couponName', 'couponType', 'denomination', 'validatyEnd','mchtInfo','flag'],
    created() {
      if (!this.couponName) {
        return;
      }
      var _array = this.couponName,
        _type = this.couponType,
        jiazhi = this.denomination,
        overtime = this.validatyEnd,
        newArray = [];
      if (!_array) {
        return
      }
      for (var i = 0; i < _array.length; i++) {
        if(this.getDayTime(overtime[i]) >= 0){ // 过期天数要大于0天
          newArray.push({
            name: _array[i],
            type: _type[i],
            price: jiazhi[i],
            overTime: this.getDayTime(overtime[i])
          })
        }
      }
      if (newArray.length > 3) { // 只显示3条数据
        newArray.length = 3;
        this.showLength = true
      }else{
        this.showLength = false
      }
      this.coupons = newArray;
    },
    methods: {
      getDayTime(value) { // 计算优惠券还有几天过期
        value = value + "";
        value = value.substring(0, 4) + '/' + value.substring(4, 6) + '/' + value.substring(6, 8);
        let day = new Date(value).format("Y/MM/dd 23:59:59");
        return Math.floor(((new Date(day).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)))
      },
      couponPage(){
          this.$router.push({
            'path': '/businessCoupon/' + this.mchtInfo.mchtId ,query:{'mchtComNum':this.mchtInfo.mchtComNum,'noMchtSwiper':this.$route.query.noMchtSwiper}
        })
      }
    },
    watch: {
      couponName() {
      }
    }
  }
</script>
<style>
  .coupon_bot{
    position:relative;
  }
  .myCouponType {
    background: #77bc6b;
    color: #fff;
    border-radius: .2rem;
    height: 1.6rem;
    line-height: 1.6rem;
    display: inline-block;
    margin-left: 1rem;
    margin-right: 0.5rem;
    padding: 0 .4rem;
  }

  .myCouponD {
    border-radius: .2rem;
  }

  .couponList12 {
    line-height: 1.8rem;
    margin: .4rem 0;
    height: 1.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .blue {
    background: #72aec6;
  }

  .yellow {
    background: #f69e06;
  }

  .orange {
    background: #fe7e5c;
  }

  .purple {
    background: #b790cd;
  }
  .jiantou{
    position:absolute;
    top:2.5rem;
    right:10px;
  }
</style>